import React from "react";
import StarterForm from "./CanvasForm";
import './starter.less'
import { Image } from "antd";
import reactIcon from '@/assets/react.svg'
import { CloseOutlined } from "@ant-design/icons";
import Reordering from "../common/StarterAnimation";
import { motion } from 'motion/react'

export const Starter = ({ onClose }) => {

    return <div className="starter-container">
        <div className="starter-bg">
            <motion.div className="starter-icon" >
                <motion.div
                    whileHover={{
                        rotate: 360, // 悬停时旋转 360°
                        transition: { duration: 5, repeat: Infinity, ease: "linear" }
                    }}>
                    <Image src={reactIcon} preview={false} />
                </motion.div>

            </motion.div>
            <div className="starter-title">
                <h1>开始之前</h1>
                <div>请补充模型基本信息</div>
            </div>
            <div className="starter-logo">
                <Reordering />
            </div>
        </div>
        <div className="starter-form">
            {/* <motion.div className="starter-close" onClick={onClose} whileHover={{ rotate: 180 }} transition={{ duration: 0.5 }}>
                <CloseOutlined />
            </motion.div> */}
            <StarterForm onFinish={onClose} />
        </div>
    </div >
}